<template>
	<div class="classify" v-if="classifyItem.length == 11">
		<div class="classify-hd">
			<img src="../assets/img/classify.png" />
		</div>
		<div class="classify-bd">
			<!-- 精选专区 start -->
			<div class="choiceness">
				<div class="choiceness-title">
					精选专区
				</div>
				<el-row class="choiceness-content">
					<el-col
						:xs="3"
						:sm="3"
						:md="3"
						:lg="2"
						v-for="item of classifyItem[0].children"
						:key="item.id"
					>
						<div
							@click="targetClassifySongList(item.special_tag_id)"
						>
							<div class="img">
								<img :src="item.icon" alt="" />
							</div>
							<span>{{ item.name.split("专区")[0] }}</span>
						</div>
					</el-col>
				</el-row>
			</div>
			<!-- 精选专区 end -->

			<!-- 风格专区 start -->
			<div class="choiceness">
				<div class="choiceness-title">
					风格专区
				</div>
				<el-row class="choiceness-content">
					<el-col
						:xs="3"
						:sm="3"
						:md="3"
						:lg="2"
						v-for="item of classifyItem[2].children"
						:key="item.id"
						v-show="item.icon"
					>
						<div
							@click="targetClassifySongList(item.special_tag_id)"
						>
							<div class="img">
								<img :src="item.icon" alt="" />
							</div>
							<span>{{ item.name.split("专区")[0] }}</span>
						</div>
					</el-col>
				</el-row>
			</div>
			<!-- 风格专区 end -->

			<!-- 其它专区 start -->
			<div class="other">
				<div class="other-title">
					其他专区
				</div>
				<el-row class="other-content">
					<el-col
						:xs="3"
						:sm="6"
						:md="6"
						:lg="4"
						v-for="item of classifyItem[3].children"
						:key="item.id"
						v-show="item.banner_hd"
					>
						<div
							@click="targetClassifySongList(item.special_tag_id)"
						>
							<div class="img">
								<img :src="item.banner_hd" />
								<div class="fill-screen">
									<i>&#xe627;</i>
								</div>
							</div>
							<span>{{ item.name }}</span>
						</div>
					</el-col>
					<el-col
						:xs="3"
						:sm="6"
						:md="6"
						:lg="4"
						v-for="item of classifyItem[4].children"
						:key="item.id"
						v-show="item.banner_hd"
					>
						<div
							@click="targetClassifySongList(item.special_tag_id)"
						>
							<div class="img">
								<img :src="item.banner_hd" />
								<div class="fill-screen">
									<i>&#xe627;</i>
								</div>
							</div>
							<span>{{ item.name }}</span>
						</div>
					</el-col>
					<el-col
						:xs="3"
						:sm="6"
						:md="6"
						:lg="4"
						v-for="item of classifyItem[5].children"
						:key="item.id"
						v-show="item.banner_hd"
					>
						<div
							@click="targetClassifySongList(item.special_tag_id)"
						>
							<div class="img">
								<img :src="item.banner_hd" />
								<div class="fill-screen">
									<i>&#xe627;</i>
								</div>
							</div>
							<span>{{ item.name }}</span>
						</div>
					</el-col>
					<el-col
						:xs="3"
						:sm="6"
						:md="6"
						:lg="4"
						v-for="item of classifyItem[6].children"
						:key="item.id"
						v-show="item.banner_hd"
					>
						<div
							@click="targetClassifySongList(item.special_tag_id)"
						>
							<div class="img">
								<img :src="item.banner_hd" />
								<div class="fill-screen">
									<i>&#xe627;</i>
								</div>
							</div>
							<span>{{ item.name }}</span>
						</div>
					</el-col>

					<el-col
						:xs="3"
						:sm="6"
						:md="6"
						:lg="4"
						v-for="item of classifyItem[10].children"
						:key="item.id"
						v-show="item.banner_hd"
					>
						<div
							@click="targetClassifySongList(item.special_tag_id)"
						>
							<div class="img">
								<img :src="item.banner_hd" />
								<div class="fill-screen">
									<i>&#xe627;</i>
								</div>
							</div>
							<span>{{ item.name }}</span>
						</div>
					</el-col>
				</el-row>
				<el-row class="other-content">
					<el-col
						:xs="3"
						:sm="6"
						:md="6"
						:lg="4"
						v-for="item of classifyItem[7].children"
						:key="item.id"
						v-show="item.banner_hd"
					>
						<div
							@click="targetClassifySongList(item.special_tag_id)"
						>
							<div class="img">
								<img :src="item.banner_hd" />
								<div class="fill-screen">
									<i>&#xe627;</i>
								</div>
							</div>
							<span>{{ item.name }}</span>
						</div>
					</el-col>
				</el-row>
			</div>
			<!-- 其它专区 end -->
		</div>
	</div>
</template>
<script>
export default {
	data() {
		return {
			// 分类项
			classifyItem: [],
		};
	},
	methods: {
		getClassify() {
			this.axios.get("/api-classify").then((res) => {
				res.data.data.info.forEach((item) => {
					if (item.id == 153 || item.id == 1263) {
						item.children.forEach((item) => {
							item.icon = item.icon.split("/{size}").join("");
						});
					} else {
						item.children.forEach((item) => {
							item.banner_hd = item.banner_hd
								.split("/{size}")
								.join("");
						});
					}
					this.classifyItem.push(item);
				});
				// this.classifyItem = res.data.data.info;
			});
		},
		targetClassifySongList(special_tag_id) {
			sessionStorage.setItem("special_tag_id", special_tag_id);
			this.$router.push(`/classifySongList/${special_tag_id}`);
		},
	},
	mounted() {
		this.getClassify();
	},
};
</script>
<style lang="scss">
.classify {
	.classify-bd {
		// 精选 start
		.choiceness {
			margin-top: 40px;
			.choiceness-title {
				font-size: 18px;
				color: #333;
			}
			.choiceness-content {
				.el-col {
					height: 80px;
					margin-top: 20px;
					cursor: pointer;
					div {
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						width: 100%;
						height: 100%;
						.img {
							overflow: hidden;
							position: relative;
							width: 40px;
							height: 40px;
							img {
								position: absolute;
								top: -40px;
								left: -40px;
								width: 40px;
								height: 40px;
								filter: drop-shadow(40px 40px 0px #5192fe);
							}
						}
						span {
							margin-top: 10px;
							color: #333;
							font-size: 14px;
						}
					}
					&:hover {
						transform: translateY(-3px);
					}
				}
			}
		}
		// 精选 end

		// 其它 start
		.other {
			margin-top: 40px;
			.other-title {
				font-size: 18px;
				color: #333;
			}
			.other-content {
				.el-col {
					margin-top: 20px;
					cursor: pointer;
					div {
						position: relative;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						.img {
							overflow: hidden;
							width: 90%;
							cursor: pointer;
							border-radius: 10px;
							img {
								width: 100%;
							}
							.fill-screen {
								display: none;
								position: absolute;
								top: 0;
								left: 0;
								width: 100%;
								height: 100%;
								background-color: rgba(0, 0, 0, 0.4);
								i {
									position: absolute;
									top: calc(50% - 25px);
									left: calc(50% - 25px);
									font-size: 50px;
									font-family: "iconfont";
									color: #fff;
									&:hover {
										color: #5192fe;
									}
								}
							}
							&:hover {
								.fill-screen {
									display: block;
								}
							}
						}
						span {
							margin-top: 10px;
							color: #333;
							font-size: 14px;
							&:hover {
								color: #5192fe;
							}
						}
					}
				}
			}
		}
		// 其它 end
	}
}
</style>
